/* h5表单提交数据的查询
 * H5FormDataList.jsx
 */

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { push } from 'redux-router';

import {h5FormDataList,clearH5FormData,loadMoreH5FormData} from '../actions/h5/H5Action';
import moment from 'moment';

class H5FormDataList extends Component{

	constructor(props){
		super(props);
	}

	componentDidMount(){
		this.props.dispatch(h5FormDataList(this.props.params.uniqueCode));
	}

	componentWillUnmount(){
		this.props.dispatch(clearH5FormData());
	}

	loadMoreData(){
		let submitPageNum=this.props.submitPageNums[0];
		if($("#submitPageNum")){
			submitPageNum=$("#submitPageNum").val();
		}
		console.log(submitPageNum);
		const datalength=this.props.datalist.length;
		const lastId=this.props.datalist[datalength-1].id;
		this.props.dispatch(loadMoreH5FormData(this.props.params.uniqueCode,submitPageNum,lastId))
	}

	submitPageNumChange(submitPageNum){
		this.props.dispatch(h5FormDataList(this.props.params.uniqueCode,submitPageNum));
	}

	render(){

		let btnCss="ui primary button";
		if(this.props.loadingData){
			btnCss="ui primary loading button";
		}

		let tableHead=(<th></th>);
		if(this.props.headInfo.length>0){
			tableHead=this.props.headInfo.map(item=>{
				return (<th key={item}>{item}</th>)
			});
		}
		let tableBody=(<tr><td>没有任何数据</td></tr>);
		if(this.props.datalist.length>0){
			tableBody=this.props.datalist.map(item=>{
				let content=this.props.headInfo.map(headItem=>{
					if(headItem=='提交时间'){
						return (<td>{moment.unix(item[headItem]).format('YYYY-MM-DD HH:mm:ss')}</td>);
					}
					return (<td>{item[headItem]}</td>)
				});
				return (
					<tr key={item.id}>{content}</tr>);
			});
		}
		const colspanLength=this.props.headInfo.length;

		let submitPageNum=(<span></span>);
		if(this.props.submitPageNums.length>1){
			const selecNum=this.props.submitPageNums.map(item=>{
				return (<option key={item} value={item}>{item}</option>);
			});
			submitPageNum=(
					<div>
						<span style={{margin: '10px 10px'}}>提交表单的页码</span>
						<select id="submitPageNum" onChange={e=>this.submitPageNumChange(e.target.value)} style={{width:'60px'}}>
							{selecNum}
						</select>
					</div>
				);
		}
		return(
			<div style={{margin:'10px 20px'}}>
				<div>
					{submitPageNum}
				</div>
				<table className="ui single line table">
				  <thead>
				    <tr>{tableHead}</tr>
				  </thead>
				  <tbody>
				    {tableBody}
				  </tbody>
				  <tfoot>
				    <tr>
					    <th colSpan={colspanLength}>
					      <div className="ui right floated pagination menu">
					       	<div className={btnCss} onClick={()=>this.loadMoreData()}>加载更多数据</div>
					      </div>
					    </th>
				    </tr>
				  </tfoot>
				</table>
			</div>
		)
	}
}

export default connect(state=>{
	const datalist=state.app.h5FormData.datalist;
	const headInfo=Array();
	if(datalist && datalist.length>0){
		const firstData=datalist[0];
		for(let name in firstData){
			if(name!='id')
				headInfo.push(name);
		}
	}
	return{
		headInfo:headInfo,
		datalist:datalist,
		loadingData:state.app.h5FormData.loadingData,
		submitPageNums:state.app.h5FormData.submitPageNums
	};
})(H5FormDataList);

